<template>
  <div class="appointment">
    <div>
      <!-- 导航栏 -->
      <van-nav-bar
        title="预约挂号"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <div class="address" @click="showPopup">
            <span>{{ address.name }}</span>
            <van-icon name="aim" color="#fff" size="14"/>
          </div>
        </template>
      </van-nav-bar>

      <van-popup 
        v-model="show" 
        position="bottom" 
        round
        >
        <van-area title="标题" :area-list="areaList" :value="address.code" @confirm='getAddress'/>
      </van-popup>
    </div>

    <!-- 医院信息-三甲医院 -->
    <div class="trimethyl content">
      <div class="category">
        <i></i>
        <span>三甲医院</span>
      </div>
      <div class="hospitals">
        <div class="hospital" v-for="item in trimethyl" :key="item.name" @click="toDetail(item)">
          <div class="logo">
            <van-image
              round
              fit="cover"
              :src="item.logo"
            />
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 医院信息-其他医院 -->
    <div class="others content">
      <div class="category">
        <i></i>
        <span>其他医院</span>
      </div>
      <div class="hospitals">
        <div class="hospital" @click="toDetail(item)" v-for="item in others" :key="item.name">
          <div class="logo">
            <van-image
              round
              fit="cover"
              :src="item.logo"
            />
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 医院信息-社区医院 -->
    <div class="community content">
      <div class="category">
        <i></i>
        <span>社区医院</span>
      </div>
      <div class="hospitals">
        <div class="hospital" v-for="item in community" :key="item.name" @click="toDetail(item)">
          <div class="logo">
            <van-image
              round
              fit="cover"
              :src="item.logo"
            />
          </div>
          <div class="name van-multi-ellipsis--l2">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  data(){
    return {
      show: false,
      areaList,
      address: {
        name: '昆山市',
        code: '320583'
      },

      // 三甲医院信息
      trimethyl: [
        {
          logo: 'https://qcloud.dpfile.com/pc/FempAG3F_3Eb2bkTCtC1t69PxT1eK9Fchow4_Y9bpIILNvtaqCABaFuzgqAuKfBsTK-l1dfmC-sNXFHV2eRvcw.jpg',
          name: ' 昆山市第一人民医院',
          type: '三甲医院',
          detail: '昆山市第一人民医院又名江苏大学附属昆山医院，是一所综合性医院，1995年通过二级甲等医院。2020年通过三级甲等医院。'
        },
        {
          logo: 'https://lbsugc.cdn.bcebos.com/images/H6d81800a19d8bc3eed637cb7808ba61ea8d34567.jpg',
          name: ' 昆山市中医医院',
          type: '三甲医院',
          detail: '昆山市中医医院创立于1985年1月，是一家集医疗、教学、科研、康复、预防、保健为一体的现代化综合性三级甲等中医医院。'
        }
      ],

      // 其他医院（二甲及以下）
      others: [
        {
          name: '昆山市第三人民医院',
          logo: 'https://img1.baidu.com/it/u=2299667704,140572084&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480',
          type: '二甲医院',
          detail: '昆山市第三人民医院地处昆山市区，是一家现代化综合性市级医院。'
        },
        {
          name: '昆山市虹桥医院',
          logo: 'https://img1.baidu.com/it/u=3410977389,2382268535&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333',
          type: '二甲医院',
          detail: '暂无'
        },
        {
          name: '昆山市第二人民医院',
          logo: 'https://img0.baidu.com/it/u=2415055478,3529490023&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500',
          type: '二甲医院',
          detail: '昆山市第二人民医院坐落于玉峰山下、中山路和前进路口，始建于1958年，是一所以中西医结合为主的综合性医院。'
        }
      ],

      // 社区医院
      community: [
        {
          name: '昆山市巴城镇社区卫生服务中心',
          logo: 'https://img1.baidu.com/it/u=177612796,2885333485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=343',
          type: '社区医院',
          detail: '昆山市巴城镇社区卫生服务中心，医疗卫生机构。'
        },
        {
          name: '昆山高新区江浦社区卫生服务中心',
          logo: 'https://so5.360tres.com/t01483dd34583ed374c.jpg',
          type: '社区医院',
          detail: '昆山市高新区江浦社区卫生服务中心，医疗卫生机构。'
        },
        {
          name: '昆山市张浦镇社区卫生服务中心',
          logo: 'https://img0.baidu.com/it/u=3672723053,3496855729&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500',
          type: '社区医院',
          detail: '昆山市张浦镇社区卫生服务中心，医疗卫生机构。'
        },
        {
          name: '昆山市陆家镇社区卫生服务中心',
          logo: 'https://img0.baidu.com/it/u=1811608743,1556253388&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
          type: '社区医院',
          detail: '昆山市陆家镇社区卫生服务中心，医疗卫生机构。'
        },
        {
          name: '昆山市千灯镇社区卫生服务中心',
          logo: 'https://inews.gtimg.com/newsapp_bt/0/15262441811/641',
          type: '社区医院',
          detail: '昆山市千灯镇社区卫生服务中心，医疗卫生机构。'
        },
        {
          name: '昆山市花桥镇社区卫生服务中心',
          logo: 'https://img0.baidu.com/it/u=911276057,1240835892&fm=253&fmt=auto&app=138&f=JPEG?w=550&h=387',
          type: '社区医院',
          detail: '昆山市花桥镇社区卫生服务中心，医疗卫生机构。'
        }
      ]
    }
  },
  methods: {
    onClickLeft() {
      // Toast('返回');
      this.$router.push({
        path: '/manager/personalCare'
      })
    },
    showPopup() {
      this.show = true;
    },
    getAddress(obj){
      console.log(obj)
      this.show = false;
      this.address = obj[2]
    },
    toDetail(item){
      this.$router.push({
        path: '/manager/appointmentDetail',
        query: item
      })
    }

  }
}
</script>

<style lang="less" scoped>
.appointment{
  padding-bottom: 60px;
  .address{
    color: #fff;
    span{
      margin-right: 2px;
    }
  }
  .van-area{
    margin-top: 10px;
  }

  .content{
    border: 1px solid #f4f4f4;
    box-shadow: 5px 5px 5px #e7e7e7;
    margin: 15px 10px;
    padding: 10px 20px 8px;
    .category{
      font-size: 18px;
      font-weight: 550;
      letter-spacing: 6px;
      margin-bottom: 10px;
      i{
        display: inline-block;
        width: 4px;
        height: 16px;
        margin-right: 10px;
        background-color: #5465cf;
      }
    }
    .hospitals{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .hospital:nth-child(odd){
        margin-right: 15px;
      }
      .hospital{
        padding: 5px 0;
        width: 47%;
        display: flex;
        align-items: center;
        .van-image{
          width: 60px;
          height: 60px;
          margin-right: 8px;
        }
        .name{
          font-size: 15px;
          line-height: 25px;
        }
      }
    }
  }
}
</style>